<template>
    <div class="view">
        <nav-bar backgroundColor="#7bbcff" color="#fff" title="升学基金" :fixed="false">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
            <div class="back" slot="right">
                我的
            </div>
        </nav-bar>
        <div class="attract">
            <div class="item">
                <div class="money">{{coin.Total}}</div>
            </div>
            <div class="item">
                <img src="@/assets/image/treasure-chest.png">
            </div>
            <div class="item">
                <div class="know">了解更多</div>
            </div>
        </div>
        <div class="particulars">
            <div class="item">
                <i class="iconfont icon-qiandao"></i>
                <span class="name">签到奖</span>
                <span class="number">{{coin.SignTotal}}</span>
            </div>
            <div class="item">
                <i class="iconfont icon-xunzhang"></i>
                <span class="name">进步奖</span>
                <span class="number">{{coin.RewardTotal}}</span>
            </div>
            <div class="item">
                <i class="iconfont icon-fenxiang"></i>
                <span class="name">分享奖</span>
                <span class="number">{{coin.ShareTotal}}</span>
            </div>
        </div>
        <div class="recharge-wrap">
            <div class="title">
                <i class="iconfont icon-jinbi"></i>
                <span>充值中心</span>
            </div>
            <div class="recharge-list">
                <div class="item" v-for="rechargeService in rechargeServiceList" :key="rechargeService.id">
                    <div class="count">{{rechargeService.Money}}元</div>
                    <div class="present">+赠{{rechargeService.Coin}}元</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import NavBar from "@/components/aui/NavBar.vue";
    import ListCell from "@/components/aui/ListCell.vue";

    import CommonUnit from "../unit/CommonUnit";

    @Component({
        components: {
            NavBar, ListCell
        }
    })
    export default class Recharge extends Scene {
        private rechargeServiceList: Array<object> = [];
        private coin: object = {};

        @State("UserStore")
        private user!: InterfaceUser;

        private back(): void {
            this.navigateBack();
        }

        private mounted(): void {
            Http.get(this.api.rechargeServiceList, CommonUnit.argumentWithUser(this.user)).then((res) => {
                if (res.Success) {
                    this.rechargeServiceList = res.Data;
                }
            });
            Http.get(this.api.coinOverView, CommonUnit.argumentWithUser(this.user)).then((res) => {
                if (res.Success) {
                    this.coin = res.Data;
                } else {
                    const toast = (<any> this).$createToast({
                        mask: true,
                        type: "warn",
                        time: 1500,
                        txt: res.Message,
                        onTimeout: () => {
                            if (!CommonUnit.responseLoginVerification(res)) {
                                this.navigateLoginPage();
                            }
                        }
                    });
                    toast.show();
                }
            });
        }
    }
</script>

<style scoped lang="stylus">
    .view
        background $theme-page-common-background-color;
        min-height 100vh;

    .attract
        display flex;
        flex-direction row;
        padding 15px 10px;
        color #fff;
        background $theme-light-color;
        justify-content space-between;
        font-size 14px;
        align-items center;
        text-align center;

        .item
            flex 1;
            position relative;

            img
                width 70px;
                height 70px;

        .money
            font-size 25px;
            padding 15px 0;
            display inline-block;

            &:before
                content '¥';
                font-size 14px;
                padding-right 3px;

        .know
            display inline-block;
            width 74%;
            padding 5px 10px;
            border 1px solid #fff;
            border-radius 15px;
            text-align center;

    .particulars
        background #fff;
        padding 10px;
        display flex;
        flex-direction row;

        .item
            flex 1;
            text-align center;
            display flex;
            flex-direction column;
            align-items center;

            i
                font-size 28px;
                color $theme-common-color;

            .name, .number
                padding 3px;
                padding-top 7px;
                font-size 13px;

            .number
                padding-top 3px;
                font-size 14px;

                &:before
                    content '¥';
                    font-size 12px;
                    padding-right 1px;

    .recharge-wrap
        margin-top 10px;
        background #fff;
        padding-bottom 10px;

        .title
            padding 0 20px;
            color $theme-common-color;
            font-size 13px;
            height 36px;
            display flex;
            align-items center;

            i.iconfont
                font-size 24px;

            span
                padding-left 4px;

        .recharge-list
            display flex;
            flex-wrap wrap;
            justify-content space-around;
            text-align center;
            padding 0 10px;

            .item
                width 110px;
                height 66px;
                display flex;
                justify-content center;
                flex-direction column;
                padding 10px 0;
                border-radius 5px;
                border 1px solid #8d9297;
                font-size 14px;

                .count
                    color $theme-contrast-color;
                    margin-bottom 3px;

                .present
                    font-size 12px;
                    color $theme-common-color;
                    margin-top 5px;

            .item:nth-child(n+4)
                margin-top 10px;

</style>
